<% title t("views.notifications.heading") %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/notifications") %>" />
  <meta name="description" content="<%= t("views.notifications.meta.description", community: community_name) %>">
  <%= meta_keywords_default %>

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/notifications") %>" />
  <meta property="og:title" content="<%= t("views.notifications.meta.og.title", community: community_name) %>" />
  <meta property="og:description" content="<%= t("views.notifications.meta.description", community: community_name) %>" />
  <meta property="og:site_name" content="<%= community_name %>" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= t("views.notifications.meta.og.title", community: community_name) %>">
  <meta name="twitter:description" content="<%= t("views.notifications.meta.description", community: community_name) %>">

   <%= javascript_include_tag "notificationPage", defer: true %>
<% end %>

<script>
  /**
   * A script that tracks clicks for welcome notifications.
   * The notification must have `trackNotification` as its onclick event
   * in order for this to be triggered.
   *
   * @param {Event} The click event on the notification.
   */
  function trackNotification(event) {
    const target = event.target;
    const { parentElement: { id: title }, text } = target;

    // TODO: [@forem/delightful]: This event doesn't appear to be firing on Honeybadger.
    // We probably want to remove it eventually if we continually don't see it being triggered.
    if (!title) {
      Honeybadger.notify(`Could not find parentElement.id when clicking on event target text: ${text}`);
    }

    ahoy.track("Clicked Welcome Notification", { title, text, target: target.toString() });
  }
</script>

<% if user_signed_in? %>
  <main id="main-content">
    <div class="crayons-layout crayons-layout--header-inside crayons-layout--limited-l crayons-layout--2-cols" id="notifications-container" data-subscribe-button-container="true">
      <header class="crayons-page-header hidden-shell-innerhidden">
        <h1 class="crayons-title"><%= t("views.notifications.heading") %></h1>
        <a href="<%= user_settings_path(tab: :notifications) %>" class="crayons-btn crayons-btn--ghost"><%= t("views.notifications.settings") %></a>
      </header>
      <div class="crayons-layout__sidebar-left hidden-shell-innerhidden">
        <%= render "notifications/nav_menu" %>
      </div>
      <div class="crayons-layout__content" data-follow-button-container="true">
        <div id="articles-list">
          <%= render "notifications_list", params: params %>
        </div>

        <%# new or less active users that don't have a page worth of notifications
            won't be shown the "load more" button %>
        <% if @notifications.size >= @initial_page_size %>
          <button id="load-more-button" type="button" class="crayons-btn crayons-btn--secondary crayons-btn--l my-6 w-100">
            <%= t("views.notifications.load") %>
          </button>
        <% end %>
      </div>
    </div>
  </main>
  <%= javascript_include_tag "subscribeButton", defer: true %>
  <script>
    <%== RunkitTag.script %>
  </script>
<% else %>
  <%= render "devise/registrations/registration_form" %>
<% end %>
